<template>
    <el-card>
        <div class="doctor-detail">
            <!-- 标题 -->
            <div class="title">
                <h2>医生详情</h2>
            </div>

            <div v-if="loading" class="loading">
                <el-skeleton :rows="10" animated />
            </div>

            <div v-else-if="doctorInfo" class="detail-content">
                <!-- 医生信息 - 完全按照图片布局 -->
                <div class="section">
                    <h3 class="section-title">医生信息</h3>

                    <!-- 第一行：医生编号、医生姓名、医生头像、联系电话 -->
                    <el-row :gutter="20" class="info-row">
                        <el-col :span="6">
                            <div class="info-item">
                                <span class="label">医生编号</span>
                                <span class="value">{{ doctorInfo._id || '' }}</span>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="info-item">
                                <span class="label">医生姓名</span>
                                <span class="value">{{ doctorInfo.name || '' }}</span>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="info-item">
                                <span class="label">医生头像</span>
                                <div class="avatar-container">
                                    <el-avatar :size="60" :src="doctorInfo.avatar">
                                        <el-icon>
                                            <User />
                                        </el-icon>
                                    </el-avatar>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="info-item">
                                <span class="label">联系电话</span>
                                <span class="value">{{ doctorInfo.phone || '' }}</span>
                            </div>
                        </el-col>
                    </el-row>

                    <!-- 第二行：性别 -->
                    <el-row :gutter="20" class="info-row">
                        <el-col :span="6">
                            <div class="info-item">
                                <span class="label">性别</span>
                                <span class="value">{{ getGenderText(doctorInfo.gender) }}</span>
                            </div>
                        </el-col>
                    </el-row>
                </div>

                <!-- 医生简介 -->
                <div class="section">
                    <h3 class="section-title">医生简介</h3>
                    <div class="intro-content">
                        {{ doctorInfo.intro || '' }}
                    </div>
                </div>

                <!-- 医生擅长 -->
                <div class="section">
                    <h3 class="section-title">医生擅长</h3>
                    <div class="skill-content">
                        {{ doctorInfo.skill || '' }}
                    </div>
                </div>

                <!-- 加入团队 -->
                <div class="section">
                    <h3 class="section-title">加入团队</h3>
                    <div class="team-content">
                        <div v-if="doctorInfo.teamIds && doctorInfo.teamIds.length > 0">
                            <div v-for="team in doctorInfo.teamIds" :key="team._id" class="team-item">
                                {{ getTeamDisplayText(team) }}
                            </div>
                        </div>
                        <div v-else></div>
                    </div>
                </div>

                <!-- 签约人数 -->
                <div class="section">
                    <h3 class="section-title">签约人数</h3>
                    <div class="sign-content">
                        <span v-if="doctorInfo.teamIds && doctorInfo.teamIds.length > 0">
                            {{ doctorInfo.teamIds[0]?.signNumber || '' }}
                        </span>
                        <span v-else></span>
                    </div>
                </div>

                <!-- 医生评分 -->
                <div class="section">
                    <h3 class="section-title">医生评分</h3>
                    <div class="rating-content">
                        <span v-if="doctorInfo.teamIds && doctorInfo.teamIds.length > 0">
                            {{ doctorInfo.teamIds[0]?.rate || '' }}
                        </span>
                        <span v-else></span>
                    </div>
                </div>

                <!-- 创建时间 -->
                <div class="section">
                    <h3 class="section-title">创建时间</h3>
                    <div class="time-content">
                        {{ formatDate(doctorInfo.createTime) || '' }}
                    </div>
                </div>

                <!-- 创建人 -->
                <div class="section">
                    <h3 class="section-title">创建人</h3>
                    <div class="creator-content">
                        {{ doctorInfo.creatorName || '' }}
                    </div>
                </div>

                <!-- 繁忙状态 -->
                <div class="section">
                    <h3 class="section-title">繁忙状态</h3>
                    <div class="status-content">
                        <el-switch v-model="busyStatus" active-text="繁忙" inactive-text="空闲" />
                    </div>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="action-buttons">
                <el-button type="primary">发送消息</el-button>
                <el-button type="primary">编辑医生信息</el-button>
                <el-button type="danger">删除</el-button>
                <el-button @click="handleReturn">返回</el-button>
            </div>
        </div>
    </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { User } from '@element-plus/icons-vue'
import { getDoctorsDetailApi } from '@/api/doctors'

// 定义事件
const emit = defineEmits(['back'])

// 定义props
const props = defineProps<{
    doctorId?: string
}>()

// 响应式数据
const loading = ref(false)
const doctorInfo = ref<any>(null)
const busyStatus = ref(true)

// 获取医生详情
const getDoctorDetail = async () => {

    loading.value = true
    try {
        const res = await getDoctorsDetailApi({ _id: props.doctorId })
        console.log('医生详情API响应:', res)

        if (res.data.code === 200) {
            doctorInfo.value = res.data.data
        } else {
            ElMessage.error('获取医生详情失败：' + (res.data.message || '未知错误'))
        }
    } catch (error) {
        console.error('获取医生详情失败:', error)
        ElMessage.error('获取医生详情失败，请检查网络连接')
    } finally {
        loading.value = false
    }
}

// 格式化性别
const getGenderText = (gender: number) => {
    return gender === 1 ? '男' : gender === 0 ? '女' : '-'
}

// 格式化团队显示文本
const getTeamDisplayText = (team: any) => {
    const parts = []

    // 机构名称
    if (team.organizationId?.name) {
        parts.push(team.organizationId.name)
    }

    // 团队名称
    if (team.name) {
        parts.push(team.name)
    }

    // 角色名称（从医生的角色信息获取）
    if (doctorInfo.value?.roleId?.name) {
        parts.push(doctorInfo.value.roleId.name)
    }

    return parts.join('/')
}

// 格式化日期
const formatDate = (dateString: string) => {
    if (!dateString) return '-'
    return new Date(dateString).toLocaleString('zh-CN')
}

// 返回
const handleReturn = () => {
    emit('back')
}

// 生命周期
onMounted(() => {
    getDoctorDetail()
})

// 暴露方法
defineExpose({
    getDoctorDetail
})
</script>

<style scoped>
.doctor-detail {
    padding: 20px;
}

.title {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #F2F7FB;
}

.title h2 {
    margin: 0;
    font-weight: 500;
    color: #333;
    position: relative;
    padding-left: 12px;
}

.title h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background-color: #409EFF;
    border-radius: 2px;
}

.loading {
    padding: 20px;
}

.detail-content {
    margin-bottom: 30px;
}

.section {
    margin-bottom: 25px;
}

.section-title {
    font-size: 13px;
    font-weight: 500;
    color: #999999;
    margin-bottom: 15px;
}

/* 医生信息标题特殊样式 */
.section:first-child .section-title {
    font-size: 16px;
    color: #333;
}

.info-row {
    margin-bottom: 20px;
}

.info-row:last-child {
    margin-bottom: 0;
}

.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.label {
    font-size: 13px;
    font-weight: 500;
    color: #999999;
    width: 80px;
    flex-shrink: 0;
    margin-right: 10px;
}

.value {
    flex: 1;
}

.avatar-container {
    display: flex;
    align-items: center;
}

.intro-content,
.skill-content {
    margin-left: 20px;
}

.team-content,
.sign-content,
.rating-content,
.time-content,
.creator-content,
.status-content {
    background: #fafafa;
    padding: 15px 20px;
    border-radius: 6px;
    color: #333;
    line-height: 1.6;
}

.team-item {
    margin-bottom: 8px;
}

.action-buttons {
    display: flex;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid #F2F7FB;
}
</style>
